<template>
  <div class="app-container">
    <el-col :span="18">
      <el-row>
        <el-button type="primary" round @click="addQuestions()">新增</el-button>
        <el-button type="danger" round>高级搜索</el-button>
      </el-row>
    </el-col>
    <el-col :span="6">
      <el-input v-model="ipt" placeholder="请输入内容">
        <el-button @click="sear" slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </el-col>
    <el-table :data="examlist" style="width: 100%" max-height="300">
      <el-table-column label="#" type="index" align="center" width="60"></el-table-column>
      <el-table-column prop="title" label="题目" width="150"> </el-table-column>
      <el-table-column prop="uid" label="发布者" width="120">
      </el-table-column>
      <el-table-column prop="classify" label="类型" width="120"> </el-table-column>
      <el-table-column prop="created" label="时间" sortable></el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="delExam(scope.row.id)"> 删除 </el-button>
          <el-button type="text" size="small" @click="updateQuestion(scope.row)"> 修改</el-button>
          <el-button type="text" size="small"> 查看 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[3,5,8,10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
      <el-drawer class="gd" size="80%" title="新增" :visible.sync="drawer" :with-header="true">
        <span>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="标题">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="类别" prop="type">
              <el-select v-model="form.cid" placeholder="请选择类别">
                <el-option v-for="(item, index) in list" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选项">
              <el-row style="margin-top:10px;" v-for="(item,index) in option" :key="index">
                <el-col :span="2">
                  <el-checkbox v-model="item.checked"></el-checkbox>
                  {{item.index}}
                </el-col>
                <el-col :span="17">
                  <el-input type="textarea" class="one-content" v-model="item.value"></el-input>
                </el-col>
                <el-col :span="5">
                  <el-button type="success" icon="el-icon-plus" v-if="index==option.length-1" @click="addOption(index)"></el-button>
                  <el-button type="warning" icon="el-icon-minus" :disabled="flag" v-if="index>=4" @click="removeOption(index)"></el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="答案" style="background-color:'#ccc;'">{{answers.join(',')||'暂无'}}</el-form-item>
            <el-form-item label="答案提示">
              <el-input v-model="form.tips"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit()">确定</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </span>

      </el-drawer>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      ipt:'',
      form: {},
      drawer: false,
      flag: false,
      flags: false,
      answers: [],
      option: [
        { index: "A", value: "", checked: false },
        { index: "B", value: "", checked: false },
        { index: "C", value: "", checked: false },
        { index: "D", value: "", checked: false }
      ],
    }
  },
  computed: {
    ...mapState('classify', ['examlist', 'list', 'pageSize', 'currentPage', 'total'])
  },
  methods: {
    async sear(){
      await this.getExam({ipt:this.ipt})
    },
    async delExam (sid) {
      // console.log(id)
      var r=confirm('确定删除吗')
      if(r==true){
        await this.delQuestions({id:sid})
      }else{
        console.log('取消')
      }
      await this.getExam({ipt:this.ipt})
    },
    updateQuestion (row) {
      this.drawer = true
      this.form = row
      this.option = JSON.parse(row.options)
      this.answer = JSON.parse(row.answers)
    },
    async onSubmit () {
      // console.log(this.form.id)
      if (this.form.id) {
        await this.updateQuestions({
          form: JSON.parse(JSON.stringify(this.form)),
          uid: 1,
          options: JSON.stringify(this.option),
          answers: JSON.stringify(this.answers)
        })
        // console.log(JSON.stringify(this.form))
      } else {
        await this.postExam({
          ...this.form,
          uid: 1,
          option: JSON.stringify(this.option),
          answers: JSON.stringify(this.answers)
        })
      }
    },
    handleCurrentChange (val) {
      this.SET_CURRENT(val)
      this.getExam({ipt:this.ipt})
    },
    handleSizeChange (val) {
      this.SET_PAGESIZE(val)
      this.getExam({ipt:this.ipt})
    },
    ...mapActions('classify', ['getExam', 'getListFun', 'postExam', 'updateQuestions', 'delQuestions']),
    ...mapMutations('classify', ['SET_CURRENT', 'SET_PAGESIZE']),
    addQuestions () {
      this.drawer = true
      this.form = {}
      this.option.map(item => {
        item.checked = false,
          item.value = ''
        // console.log(item)
      }),
        this.answers = []
    },
    //form表单新增选项
    addOption (index) {
      this.option.push({
        index: String.fromCharCode(index + 65),
        value: "",
        checked: false
      });
      if (this.option.length > 1) {
        this.flag = false
      }
    },
    //form表单删除选项
    removeOption (index) {
      this.option.splice(index, 1);
      if (this.option.length == 1) {
        this.flag = true
      }
    },
  },
  mounted () {
    this.getExam({ipt:this.ipt}),
      this.getListFun()
  },
  watch: {
    option: {
      deep: true,
      handler: function (newQuestion, oldQuestion) {
        this.answers = [];
        newQuestion.map((value, index) => {
          this.option[index]["index"] = String.fromCharCode(index + 65);
          // console.log(value)
          value.checked && this.answers.push(value.index);
          // console.log(value.checked)
        });
      }
    }
  }
}
</script>

<style>
.gd >>> .el-drawer.rtl {
  overflow: hidden;
  overflow-y: auto;
}

.el-drawer__header > :first-child {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  outline: none;
}
</style>